<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    key:<input id="key" type="text"/>
    value:<input id="values" type="text"/>
    <button id="set">存入</button>
    <button id="get">取出</button>
    <button id="del">删除</button>
</body>
<script>
    // 本地存储
    localStorage.setItem('user','hanhan')

    // 临时存储
    sessionStorage.setItem('user','hanhan')

    // cookie
    document.cookie = "user=hanhan; expires=Sun, 28 Dec 2020 12:00:00 UTC; path=/";

    // cookie 手动封装
    // 存入cookie

    function setCookie(key, value, days = 7) {

        var d = new Date();

        d.setTime(d.getTime() + (days*24*60*60*1000));

        document.cookie = key + "=" + value + ";" + "expires="+ d.toUTCString() + ";path=/";
    } 

    // 取出cookie
    function getCookie(key) {

        var name = key + "=";          

        var decodedCookie = decodeURIComponent(document.cookie); 

        var ca = decodedCookie.split(';'); 

        for(var i = 0; i <ca.length; i++) {
            var c = ca[i];
            // 去空格
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            // 
            if (c.indexOf(name) == 0) {
                return c.substring(5, 13);
            }
        }
        return "";
    } 



    set.onclick = () => setCookie(key.value,values.value)
    get.onclick = () =>console.log(getCookie(key.value))
    del.onclick = ()=>setCookie(key.value,values.value,0)


    
</script>
</html>